<template>
    <div style="padding-top: 20px;">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-content" >
                    <div style="position: fixed;top: 300px">
                            <div style="color: white">
                                <el-button type="primary" @click="listenMusic">Listening<i class="el-icon-headset"></i></el-button>
                            </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content ">
                    <el-card class="box-card">
                        <el-row :gutter="20">
                            <el-col :span="14"><div class="grid-content" style="font-size: 17px;color: #72767b">关注的歌手(1080)</div></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="14"><div class="grid-content" style="font-size: 17px;color: #72767b">收藏的视频(1367)</div></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="14"><div class="grid-content" style="font-size: 17px;color: #72767b">喜欢的电台(1209)</div></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="14"><div class="grid-content" style="font-size: 17px;color: #72767b">喜欢的语种(1111)</div></el-col>
                        </el-row>
                        <hr class="hr">
                        <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content" style="font-size: 17px;color: #72767b">我喜欢的风格:</div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <div class="grid-content" style="font-size: 17px">
                                    <el-tag
                                            v-for="item in items"
                                            :key="item.label"
                                            :type="item.type"
                                            effect="plain">
                                        {{ item.label }}
                                    </el-tag>
                                </div>
                            </el-col>
                        </el-row>
                        <hr class="hr">
                        <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content" style="font-size: 17px;color: #72767b">我喜欢的歌手:</div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <div class="grid-content" style="font-size: 17px">
                                    <el-tag
                                            v-for="item in items2"
                                            :key="item.label"
                                            :type="item.type"
                                            effect="plain">
                                        {{ item.label }}
                                    </el-tag>
                                </div>
                            </el-col>
                        </el-row>
                        <hr class="hr">
                        <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content" style="font-size: 17px;color: #72767b">我听歌的标签:</div></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <div class="grid-content" style="font-size: 17px">
                                    <el-tag
                                            v-for="item in items3"
                                            :key="item.label"
                                            :type="item.type"
                                            effect="plain">
                                        {{ item.label }}
                                    </el-tag>
                                </div>
                            </el-col>
                        </el-row>
                        <hr class="hr">
                        <br><br>

                        <el-row :gutter="20">
                            <el-col :span="20"><div class="grid-content" style="font-size: 15px;color: #72767b">SteakLiu版权所有,若想引用此模板,请征得作者允许</div></el-col>
                            <el-row :gutter="20">
                                <el-col :span="20"><div class="grid-content" style="font-size: 15px;color: #72767b;float: right">------刘牌</div></el-col>
                            </el-row>
                        </el-row>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="11">
                <div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <el-row :gutter="20">
                            <el-col :span="10">
                                <div class="grid-content bg-purple-dark">
                                    <el-card>
                                            <el-avatar shape="square" :size="size" :src="circleUr3" style="width: 200px;height: 200px"></el-avatar>
                                    </el-card>
                                </div>
                            </el-col>
                            <el-col :span="10">
                                <div class="grid-content">
                                    <div style="color: dimgrey;font-size: 25px;float: left;padding-left: 4px">
                                            <span><i class="el-icon-mic"></i>面朝大海,春暖花开</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12" style="padding-top: 25px">
                                    <div class="grid-content">
                                        <div style="float: left;padding-left: 9px">
                                            <el-avatar shape="square" :src="circleUrl" style="width: 60px;height: 60px"></el-avatar>
                                        </div>
                                        <div style="float: left;padding-top: 15px;padding-left: 25px; font-size: 20px">
                                            <span style="color: #72767b">steakLiu &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 13px;color: #99a9bf">2014年的回忆</span></span>
                                        </div>
                                    </div>
                            </el-col>
                            <el-col :span="7" style="padding-top: 17px">
                                <div class="grid-content" style="height: 100px">
                                    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=150 src="//music.163.com/outchain/player?type=2&id=28940188&auto=1&height=66"></iframe>
                                </div>
                            </el-col>
                        </el-row>
                        <hr class="hr">
                        <div>
                            <div>
                                <span>歌曲列表</span>
                            </div>
                            <hr class="hr">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    height="700px"
                                    >
                                <el-table-column
                                        fixed
                                        prop=""
                                        label=""
                                        width="50">
                                    <i class="el-icon-video-play"></i>
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="歌曲名称"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="time"
                                        label="时长"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="actor"
                                        label="歌手"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="publisher"
                                        label="专辑"
                                        width="120">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="4"><div class="grid-content"></div></el-col>
        </el-row>

        <el-dialog
                title="Listening Music"
                :visible.sync="listenMusicDig"
                width="50%">
            <el-card>
                <div>
                    <el-avatar shape="square" :size="size" :src="circleUr3" style="width: 250px;height: 200px"></el-avatar>
                </div>
                <div style="color: #333333;font-size: 20px">
                    旅行的意义
                </div>
                <div>
                    <div>艺人：陈绮贞</div>
                </div>
                <div>
                    <div>专辑：《旅行的意义》</div>
                </div>
                <div>
                    <el-button type="danger" icon="el-icon-video-pause" circle></el-button>
                </div>
                <hr class="hr">
                <div style="font-size: 20px;color: steelblue">
                    <div>你勉强说出你爱我的原因</div>
                    <div>却说不出你欣赏我那一种表情</div>
                    <div>..........................</div>
                </div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    import App from "../App";
    export default {
        name: "MyMusic",
        data(){
            return{
                circleUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575791768225&di=1cec9d082e17efbfaed7592004d2f289&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Fku%2Fp3%2FQJ6941854897.jpg",
                sizeList: ["large","large","large","large"],
                circleUrl2:"http://hbimg.b0.upaiyun.com/9d6684930b8540e399508e61192bd2a7f79913c333009-qocczf_fw658",
                circleUr3:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577122386018&di=f3d3045dbbc53b5b5220d03753b334fc&imgtype=0&src=http%3A%2F%2Fimg01.hc360.com%2Faudio%2F201403%2F201403040950426099.jpg",

                mySong:true,
                listenMusicDig:false,

                tableData:[
                    {
                        name:'蓝莲花',
                        time:'4.32',
                        actor:'许巍',
                        publisher:'那一年',
                    },
                    {
                        name:'dont cry',
                        time:'4.00',
                        actor:'枪炮与玫瑰',
                        publisher:'Live Like A Suicide',
                    },
                    {
                        name:'小幸运',
                        time:'3.52',
                        actor:'田馥甄',
                        publisher:'小幸运',
                    },
                    {
                        name:'曾经的你',
                        time:'4.32',
                        actor:'许巍',
                        publisher:'时光漫步',
                    },
                    {
                        name:'时光',
                        time:'4.00',
                        actor:'许巍',
                        publisher:'那一年',
                    },
                    {
                        name:'在路上',
                        time:'5.30',
                        actor:'许巍',
                        publisher:'路途',
                    },
                    {
                        name:'像风一样自由',
                        time:'4.02',
                        actor:'许巍',
                        publisher:'那一年',
                    },
                    {
                        name:'天鹅之旅',
                        time:'4.09',
                        actor:'许巍',
                        publisher:'那一年',
                    },
                    {
                        name:'漫步',
                        time:'4.03',
                        actor:'许巍',
                        publisher:'那一年',
                    },
                    {
                        name:'灿烂',
                        time:'4.30',
                        actor:'许巍',
                        publisher:'那一年',
                    },
                    {
                        name:'无尽光芒',
                        time:'4.10',
                        actor:'许巍',
                        publisher:'无尽光芒',
                    },
                ],
                items: [
                    { type: '', label: '摇滚' },
                    { type: 'success', label: '英伦' },
                    { type: 'info', label: '金属' },
                    { type: 'danger', label: '抒情' },
                ],
                items2: [
                    { type: 'warning', label: '许巍' },
                    { type: 'danger', label: '朴树' },
                    { type: 'warning', label: 'U2' },
                    { type: 'info', label: '披头士' },
                ],
                items3: [
                    { type: 'danger', label: '生活' },
                    { type: 'info', label: '拉萨' },
                    { type: 'success', label: '酒' },
                    { type: '', label: '爱情' },
                ]
            }
        },
        methods:{
            listenMusic(){
                this.listenMusicDig = true;
            },
        }
    }
</script>

<style scoped>
    .style-font{
        color: lightslategray;
    }
    .hr{
        height: 1px;
        background-color: #ddd;
        border: none;
    }
</style>
